<template>
	<l-echart class="echarts" ref="chart"></l-echart>
</template>

<script>
	import * as echarts from '@/pages/project/project_detail/echarts.min.js'
	export default {
		props: {
			option: {
				type: Object,
				default: {}
			}

		},
		data() {
			return {
				chart: null
			};
		},
		watch: {
			option: {
				handler() {
					if (this.chart) {
						this.$nextTick(() => {
							this.redraw()
						})
					} else {
						this.$nextTick(() => {
							this.init()
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			init() {
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
					chart.on('datazoom', (e) => {
						this.$emit("datazoom", e)
					});
				});
			},
			redraw() {
				this.$refs.chart.setOption(data)
			},
			resize() {
				this.$refs.chart.resize()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.echarts {
		// position: absolute;
		width: 100%;
	}
</style>